<template>
  <div class="app-container">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <span>{{storeName}}</span>
          <span>{{otherInfo}}</span>
        </el-form-item>
      </el-form>
      <dj-simple-table :columns="tableColumns" :data="listData" :loading="listLoading" />

    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination>
      <span v-if="listData.length > 0" class="pull-right mt10" style="font-size:14px;color:#606266;">
        <span class="pr">应收数量合计: {{all_num}}</span>
        <span class="pr">应收金额合计: {{all_money|keepTwoNum}}</span>
        <span class="pr">实收数量合计: {{arrive_num}}</span>
        <span class="pr">实收金额合计: {{arrive_money|keepTwoNum}}</span>
        <span class="pr">数量差异合计: {{diff_num}}</span>
        <span class="pr">金额差异合计: {{diff_money|keepTwoNum}}</span>
      </span>
    </div>
  </div>
</template>
<script>
import { getReceiveList, getReceiveListPage, getReceiveSummary } from '@/api/report/store_stock_in';
import { DjSimpleTable } from '@/components/table';
import { pickerOptionsF, pickerDateDot, optionMaxTime, getDateString } from '@/utils';
export default {
  components: {
    'dj-simple-table': DjSimpleTable
  },
  data() {
    return {
      tableColumns: [
        {
          label: '序号',
          dtcol: 'index'
        },
        {
          label: '图片',
          dtcol: ['thumb', 'img'],
          type: 'image'
        },
        {
          label: '礼品名称',
          dtcol: 'name'
        },
        {
          label: '礼品编号',
          dtcol: 'gift_id'
        },
        {
          label: '神采编号',
          dtcol: 'no_obsolete'
        },
        {
          label: '国标码',
          dtcol: 'gb_code'
        },
        {
          label: '分类',
          dtcol: 'gift_type'
        },
        {
          label: '箱规',
          dtcol: 'box_num'
        },
        {
          label: '采购价',
          dtcol: 'end_money_sell',
          isnum: true
        },
        {
          label: '应收数量',
          dtcol: 'all_num'
          // summary: true
        },
        {
          label: '应收金额',
          dtcol: 'all_money',
          isnum: true
          // summary: true
        },
        {
          label: '实收数量',
          dtcol: 'arrive_num'
          // summary: true
        },
        {
          label: '实收金额',
          dtcol: 'arrive_money',
          isnum: true
          // summary: true
        },
        {
          label: '数量差异',
          dtcol: 'diff_num',
          colornum: true // 是否颜色显示数字，为true时，小于0红色，否则绿色
          // summary: true
        },
        {
          label: '金额差异',
          dtcol: 'diff_money',
          colornum: true,
          isnum: true
          // summary: true
        }
      ],
      listData: [], // 对象数组元素中的对象含有store_id属性
      listLoading: false,
      formInline: {
        revice_id: '', //49,50
        type: '' // 1供应商采购入库，2中央仓采购入库，3其他仓调拨入库
      },
      pickerDate: ['2019-11-01', '2019-11-20'],
      storeName: '',
      otherInfo: '',
      currentPage: 1,
      totalDataNumber: 0,
      all_money: 0,
      all_num: 0,
      arrive_money: 0,
      arrive_num: 0,
      diff_money: 0,
      diff_num: 0
    };
  },
  created() {
    if (!this.listData || this.listData.length == 0) {
      this.fetchData();
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.beforeComingIn();
    });
  },
  methods: {
    beforeComingIn() {
      if (this.$route.query.routerflag) {
        let col = this.$route.query.col;

        this.formInline.revice_id = this.$route.query.row.revice_id;
        this.formInline.type = this.$route.query.row.type;
        this.storeName = this.$route.query.global.store_name;
        this.otherInfo = '收货单号：' + this.$route.query.row.send_order_no;
        this.fetchData();
      } else {
        if (!this.listData || this.listData.length == 0) {
          this.fetchData();
        }
      }
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      getReceiveListPage(this.formInline)
        .then(response => {
          this.totalDataNumber = response.message.page * 20;
          getReceiveList(this.formInline, this.currentPage).then(response => {
            // console.log(response, 'zst1120 getPurchaseList');
            if (response.code == 1 && response.message) {
              response = response.message;
              this.otherInfo = '  采购单号：' + response.purchase_order_id + '  采购渠道：' + response.type_name + '  ';
              if (this.formInline.type == 1) {
                this.otherInfo += response.supplier_name;
              } else {
                this.otherInfo += response.house_name;
              }

              response.gift_list.forEach((element, index) => {
                element.index = index + 1 + (this.currentPage - 1) * 20;
                element.diff_num = element.arrive_num * 1 - element.all_num;
                element.diff_money = element.arrive_money * 1 - element.all_money;
              });
              this.listData = response.gift_list;
            } else {
              this.listData = [];
            }
            this.listLoading = false;
          });
        })
        .catch(res => {
          this.listLoading = false;
        });
      // 合计
      getReceiveSummary(this.formInline).then(response => {
        // console.log(33,response)
        this.all_money = response.data.all_money;
        this.all_num = response.data.all_num;
        this.arrive_money = response.data.arrive_money;
        this.arrive_num = response.data.arrive_num;
        this.diff_num = response.data.arrive_num * 1 - response.data.all_num;
        this.diff_money = response.data.arrive_money * 1 - response.data.all_money;
      });
    },

    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      this.currentPage = val;
      getReceiveList(this.formInline, val)
        .then(response => {
          if (response.code == 1 && response.message) {
            response = response.message;
            // this.otherInfo = '  采购单号：' + response.purchase_order_id + '  采购渠道：' + response.type_name + '  ';
            // if (this.formInline.type == 1) {
            //   this.otherInfo += response.supplier_name;
            // } else {
            //   this.otherInfo += response.house_name;
            // }
            response.gift_list.forEach((element, index) => {
              element.index = index + 1 + (this.currentPage - 1) * 20;
              element.diff_num = element.arrive_num * 1 - element.all_num;
              element.diff_money = element.arrive_money * 1 - element.all_money;
            });
            this.listData = response.gift_list;
          } else {
            this.listData = [];
          }
          // this.list = response.data;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
      // 合计
      getReceiveSummary(this.formInline).then(response => {
        this.all_money = response.data.all_money;
        this.all_num = response.data.all_num;
        this.arrive_money = response.data.arrive_money;
        this.arrive_num = response.data.arrive_num;
        this.diff_money = response.data.arrive_num * 1 - response.data.all_num;
        this.diff_num = response.data.arrive_money * 1 - response.data.all_money;
      });
    }
  }
};
</script>
<style scoped>
.ok {
  color: #67c23a;
}
.bad {
  color: #f56c6c;
}
.pr {
  padding-right: 10px;
}
</style>